<template>
  <div class="container">
    <!-- 顶部内容 -->
    <!-- v-if判断 如果路径是 '/home/my' 那么就让其设置为 个人信息 -->
    <van-nav-bar v-if="this.$route.fullPath === '/home/my'" v-show="show" title="个人信息" />
    <!-- v-else 否则就是搜索功能 -->
    <van-nav-bar v-else title="主页" right-text="搜索" @click-right='$router.push("/search")' />
    <!-- 中间内容 -->
    <div class="wrapper">
      <keep-alive>
        <router-view></router-view>
      </keep-alive>
    </div>
    <!-- 底部内容 -->
    <van-tabbar v-model="active">
      <van-tabbar-item to="/home/main" icon="home-o">首页</van-tabbar-item>
      <van-tabbar-item to="/home/video" icon="search">视频</van-tabbar-item>
      <van-tabbar-item to="/home/question" icon="friends-o">问答</van-tabbar-item>
      <van-tabbar-item to="/home/my" icon="setting-o">个人</van-tabbar-item>
    </van-tabbar>
  </div>

</template>

<script>

export default {
  data () {
    return {
      active: 0,
      route: '',
      show: true
    }
  },
  methods: {
    head () {
      const route = '/home/my'
      this.route = route
      console.log(route)
    }
  },
  created () {
    this.head()
  }
}
</script>

<style lang="less" scoped>
// scoped的作用：让这些样式仅仅在当前组件生效，防止组件之间相同的类名冲突
// 本质上是如何做到这件事情的？添加唯一的自定义属性用于属性选择器
// 把页面宽高设置为可视窗口的大小
.container {
  width: 100%;
  height: 100%;
  position: relative;
  // 设置内容显示区域的 wrapper的大小
  .wrapper {
    position: absolute;
    width: 100%;
    bottom: 100px;
    top: 92px;
  }
}
</style>
